<template>
  <div class="scroll_wrap">
    <div class="scroll" :style="scrollStyle" @wheel.prevent="handleWheel" ref="scroll">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        xStyle:'overflow-x: scroll;overflow-y: hidden;bottom: -17px;right: 0;',
        yStyle:'overflow-x: hidden;overflow-y: scroll;right: -17px;bottom: 0;',
        scrollStyle:'overflow-x: hidden;overflow-y: scroll;right: -17px;bottom: 0;'
    };
  },
  props: {
      scrollX: {
          type: Boolean,
          default: false
      },
      scrollY: {
          type: Boolean,
          default: false
      }
  },
  mounted () {
    if(this.scrollX) {
      this.scrollStyle = this.xStyle
    }else if(this.scrollY) {
      this.scrollStyle = this.yStyle
    }
  },
  methods: {
    handleWheel(e) {
      if (navigator.userAgent.indexOf('Firefox') >= 0) {
        if(this.scrollX) {
          if(e.deltaY > 0) {
            this.$refs.scroll.scrollLeft += 20
          }else {
            this.$refs.scroll.scrollLeft -= 20
          }
        }
      }else{
        if(this.scrollX) {
          if(e.wheelDelta < 0) {
            this.$refs.scroll.scrollLeft += 20
          }else {
            this.$refs.scroll.scrollLeft -= 20
          }
        }
      }
      
    }
  }
};
</script>

<style scoped>
.scroll_wrap {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.scroll {
  position: absolute; /*不能使用relative和fixed定位*/
  top: 0;
  left: 0;
}
</style>
